<template>
  <f7-page>
    <f7-navbar title="个人设置" back-link="返回"></f7-navbar>
    <div class="set">
      <ul>
        <li @click="">
          个人头像
          <span><img :src="user.photo_url" alt=""/></span>
          <i></i>
        </li>
        <li @click="myOpenBtn()">
          个人姓名
          <span>{{user.real_name}}</span>
          <i></i>
        </li>
        <li @click="phOpenBtn()">
          手机
          <span>{{user.phone}}</span>
          <i></i>
        </li>
        <li>
          性别
          <span>{{user.gender=='MALE'?'男':'女'}}</span>
          <i></i>
        </li>
        <li>
          职务
          <span>{{user.post}}</span>
          <i></i>
        </li>
        <li>
          角色
          <span>{{user.role | roleAll()}}</span>
          <i></i>
        </li>
      </ul>
    </div>
    <div class="out">
      退出登录
    </div>


    <f7-popup :opened="myPop">
      <f7-page>
          <f7-navbar title="修改姓名"></f7-navbar>
          <div>
            <input type="text" placeholder="请输入" v-model="user.real_name" />
          </div>
        <f7-toolbar>
          <f7-block>
            <f7-link @click="myChangeBtn()">确定</f7-link>
          </f7-block>
          <f7-block>
            <f7-link @click="myCloseBtn()">关闭</f7-link>
          </f7-block>
        </f7-toolbar>
      </f7-page>
    </f7-popup>


    <f7-popover :opened="phPop" class="popover">
      <div>
        <div>
          <h4>修改手机号</h4>
          <div>
            <input type="text" placeholder="请输入" v-model="myPhone" />
            <input type="text" placeholder="请输入验证码"/>
          </div>
        </div>

        <f7-link @click="phChangeBtn()">确定</f7-link>
        <f7-link @click="phCloseBtn()">关闭</f7-link>
      </div>
    </f7-popover>
  </f7-page>
</template>

<script>
  import F7Page from "framework7-vue/src/components/page";
  import F7Link from "framework7-vue/src/components/link";
  import F7Popover from "framework7-vue/src/components/popover";
  import F7Popup from "framework7-vue/src/components/popup";
  import F7Block from "framework7-vue/src/components/block";
  export default {
    name: 'setting',
      components: {F7Block, F7Popup, F7Link,F7Popover,F7Page},
      data () {
      return {
        user:'',
          myPhone:'',
          myPop:false,
          phPop:false
      }
    },
    methods: {
      async getBase () {
        let base = await this.AccountService.getBase()
        this.user = base.data.data.user
          this.myPhone=this.user.phone
      },

        //更改名字
      myOpenBtn(){
          this.myPop=true
      },
      myCloseBtn(){
          this.myPop=false
      },
      async myChangeBtn(){
          let param = {real_name:this.user.real_name}
          this.myChangeBtn=(await this.AccountService.changeUser(param)).data;
          this.myPop=false
          this.goBack({ force: true, ignoreCache: true })
      },

        //更改手机号
      phOpenBtn(){
          this.phPop=true
      },
      phCloseBtn(){
          this.phPop=false
      },
      phChangeBtn(){
          this.user.phone=this.myPhone
          this.phPop=false
      }
    },
    mounted(){
        this.getBase()
    }
  }
</script>

<style scoped>
.set ul{
  padding: 0;
  margin-top: 10px;
}
.set li img{
  width: 30px;
  height: auto;
  margin-top: 10px;
}
  .set ul li{
    background: white;
    line-height: 50px;
    font-size: 14px;
    border-bottom: 1px silver solid;
    padding-left: 10px;
  }
.set ul li span{
  float: right;
  margin-right: 10px;
  height: 50px;
}

  .out{
    position: fixed;
    bottom: 0;
    color: #a3a2f0;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    width: 100%;
    background: white;
  }


.popover{
  width:100%;
  height: auto;
  position: fixed;
  top:30%;
}
.popover h4{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px silver solid;
  line-height: 40px;
}
.popover input{
  font-size: 18px;
  border: 1px silver solid;
  text-align: center;
  height: 40px;
  width:300px;
  margin: 20px auto;
}
.popover a{
  color: #333;
  width: 50%;
  text-align: center;
  font-size: 24px;
  border-top: 1px silver solid;
  margin-top: 50px;
  line-height: 44px;
}
</style>
